<template>
	<upper />

	<swiper
		class="swiper bannerTitles relative"
		autoplay
		style="height: 400rpx; width: 100%">
		<swiper-item
			v-for="(item, index) in swiperList"
			:key="item.id"
			class="inherit relative"
			@click="handleSwiper(index)">
			<image mode="aspectFill" class="inherit" :src="baseUrl + item.image" />
			<view class="bannerTitles-title absolute">{{ item.title }}</view>
			<view class="bannerTitles-ds absolute">{{ item.fu_title }}</view>
		</swiper-item>
	</swiper>

	<!-- 		<u-swiper
			:list="swiperList"
			:height="swiperParams.height"
			@click="handleSwiper"></u-swiper> -->

	<u-gap height="40rpx"></u-gap>
	<view
		class="sticky zIndex99"
		:style="{
			background: '#fff',
			top: getUpperHeight().mgTop + getUpperHeight().linHeight + 12 + 'px'
		}">
		<view class="selects flex wrap">
			<view :class="{ active: selectActive === -1 }" @click="handleSelectActive(-1)">
				最新上架
			</view>
			<view
				v-for="(item, index) in selects.slice(0, showMore ? selects.length : 8)"
				:key="index"
				:class="{ active: selectActive === index }"
				@click="handleSelectActive(index)">
				{{ item.name }}
			</view>
		</view>
		<image
			v-if="selects.length > 8"
			class="arrowDown block"
			src="https://aph.junhecms.com/image/homePage/24.png"
			:style="{ transform: `rotate(${showMore ? 180 : 0}deg)` }"
			@click="showMore = !showMore" />
	</view>
	<u-gap height="20rpx"></u-gap>

	<view class="dotData" v-if="selectContList.length <= 0">数据为空</view>

	<view class="selectCont flex" v-for="item in selectContList" :key="item.id">
		<view class="selectCont-image relative shrink0">
			<image mode="aspectFill" class="inherit" :src="baseUrl + item.image" />
			<view v-if="item.lmcat">{{ item.lmcat }}</view>
		</view>
		<view class="selectCont-main">
			<view class="selectCont-main-head flex space-between align-items_center">
				<view>{{ item.procat }}</view>
				<view @click="viewMore(item.id)">查看更多</view>
			</view>
			<view class="selectCont-main-title">{{ item.title }}</view>
			<view class="selectCont-main-ds">{{ item.title_fu }}</view>
		</view>
	</view>
	<footerTips></footerTips>
	<u-gap height="60rpx"></u-gap>
	<share :isCustom="true" />
	<tabbar :value="1" />
</template>

<script setup>
import { ref, reactive } from 'vue';
import { post } from '@/utils/collect.js';
import { pageJump, baseUrl, getUpperHeight } from '@/utils/tool.js';
import { onReachBottom } from '@dcloudio/uni-app';
import upper from '@/components/upper';
import footerTips from '@/components/footerTips/footerTips.vue';

uni.setStorageSync('navTitle', '产品中心');

onReachBottom(() => {
	if (selectContList.value.length >= selectContTotal.value) return;
	productParams.page++;
	_product();
});

const showMore = ref(false);

const selects = ref([]);
const selectActive = ref(-1);
const handleSelectActive = (index) => {
	uni.pageScrollTo({
		scrollTop: 0,
		duration: 0
	});

	selectActive.value = index;
	productParams.page = 1;
	if (index === -1) productParams.id = undefined;
	else productParams.id = selects.value[index].id;
	_product();
};

const productParams = reactive({
	id: undefined,
	page: 1,
	limit: 10
});

// 产品列表
const selectContList = ref([]);
const selectContTotal = ref(0);
const _product = () => {
	post('/index/product', productParams).then((res) => {
		if (productParams.page === 1) selectContList.value = res.data.data;
		else selectContList.value = selectContList.value.concat(res.data.data);
		selectContTotal.value = res.data.total;
	});
};
_product();

// 轮播图
const swiperList = ref([]);
const swiperParams = reactive({
	height: '400rpx'
});

// 轮播图跳转
const handleSwiper = (index) => {
	const item = swiperList.value[index];
	pageJump(item);
};

// 筛选、轮播图

const _prolist = () => {
	post('/index/prolist').then((res) => {
		selects.value = res.data.data;
		swiperList.value = res.data.ad.map((item) => {
			return {
				...item,
				url: baseUrl + item.image
			};
		});
	});
};
_prolist();

const viewMore = (id) => {
	uni.navigateTo({
		url: `/homePage/ecology/info?navTitle=数据分析管理&id=${id}`
	});
};
</script>
